<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花开半夏</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" type="text/css" href="css/default.css">
    <script src="js/index.js"></script>
</head>

<body>
    <section class="flower">
        <!-- 头部区域 -->
        <header class="header">花开半夏</header>

        <!-- 轮播图部分 -->
        <div class="focus">
            <!-- 轮播图片 -->
            <ul>
                <li><img src="images/首页3.png" alt="..."></li>
                <li><img src="images/首页1.png" alt="..."></li>
                <li><img src="images/首页2.png" alt="..."></li>
                <li><img src="images/首页3.png" alt="..."></li>
                <li><img src="images/首页1.png" alt="..."></li>
            </ul>
            <!-- 小圆点 -->
            <ol>
                <li class="current"></li>
                <li></li>
                <li></li>
            </ol>
        </div>

        <!-- 新品上市部分 -->
        <section class="content">
            <!-- 头部 -->
            <div class="con-hd">
                <h4>
                    <span class="icon"><img src="images/新品.png" alt=""></span> 新品上市
                </h4>
                <a href="#" class="more">更多>></a>
            </div>
            <!-- 展示图片、文字简介 -->
            <div class="show">
                <div class="pic">
                    <img src="images/新品1虎刺梅.PNG" alt="">
                </div>
                <div class="jianjie">
                    <p class="mingzi">水培植物玻璃虎刺梅盆栽室内花卉绿植</p>
                    <span class="jiage">￥30.00</span>
                    <a href="#" class="xiangqing">查看详情</a>
                </div>
            </div>
            <div class="show">
                <div class="pic two">
                    <img src="images/新品2栀子花.PNG" alt="">
                </div>
                <div class="jianjie">
                    <p class="mingzi">水培植物办公室绿植盆栽花卉盆景栀子花</p>
                    <span class="jiage">￥25.90</span>
                    <a href="#" class="xiangqing">查看详情</a>
                </div>
            </div>
        </section>

        <!-- 人气热卖部分 -->
        <section class="content hot_con">
            <!-- 头部 -->
            <div class="con-hd">
                <h4>
                    <span class="icon"><img src="images/人气.PNG" alt=""></span> 人气热卖
                </h4>
                <a href="#" class="more">更多>></a>
            </div>
            <!-- 展示部分 -->
            <div id="gallery-wrapper">
                <div class="white-panel">
                    <img src="images/人气1水培绿萝.png" class="thumb">
                    <p><a href="#">水培植物玻璃绿萝盆栽室内花卉绿植除吸甲醛</a></p>
                    <span>￥20.00</span>
                </div>
                <div class="white-panel">
                    <img src="images/人气2水培巴西木.png" class="thumb">
                    <p><a href="#">水培巴西木幸运木带格鲁特绿植盆栽办公室桌面微型植物</a></p>
                    <span>￥29.90</span>
                </div>
                <div class="white-panel">
                    <img src="images/人气3多肉组合.png" class="thumb">
                    <p><a href="#">多肉植物盆栽办公室内桌面新手新款组合 北欧6盆组合</a></p>
                    <span>￥49.90</span>
                </div>
                <div class="white-panel">
                    <img src="images/人气4多肉雅乐之舞.png" class="thumb">
                    <p><a href="#">多肉雅乐之舞盆栽办公室桌面花草盆栽大株多肉</a></p>
                    <span>￥29.90</span>
                </div>
            </div>

            <script src="js/jquery-1.11.0.min.js"></script>
            <script src="js/pinterest_grid.js"></script>
            <script type="text/javascript">
                $(function() {
                    $("#gallery-wrapper").pinterest_grid({
                        no_columns: 2,
                        padding_x: 10,
                        padding_y: 15,
                        margin_bottom: 20,
                        single_column_breakpoint: 700
                    });

                });
            </script>
        </section>

        <!-- 满减优惠券部分 -->
        <div class="quan">
            <a href="#" class="item one">
                <img src="./images/满减1.PNG" alt="">
            </a>
            <a href="#" class="item two">
                <img src="./images/满减2.PNG" alt="">
            </a>
        </div>

        <!-- 返回顶部、客服、转发部分 -->
        <div class="goBack"><img src="images/客服.png" alt=""></div>

        <!-- footer模块 -->
        <footer class="footer">
            <a href="#" class="item">
                <img src="./images/首页.png" alt="">
                <p>首页</p>
            </a>
            <a href="#" class="item">
                <img src="./images/礼品.png" alt="">
                <p>定制礼品</p>
            </a>
            <a href="#" class="item">
                <img src="./images/我的2.png" alt="">
                <p>我的</p>
            </a>
        </footer>

</body>

</html>